
/**
 * 声明命名空间
 */
Ext.ns('Learn.window');
//Ext.namespace('Learn.window');//ns是namespace的简写

/**
 * 定义Learn.window.WindowExtend 组件，继承Ext.Window父类
 */
Learn.window.WindowExtendPro = Ext.extend(Ext.Window, {
	
	id : null,//自定义配置选项id
	
	itemsSize : 0,//自定义配置选项imtesSize
	
	itemsIdArr : new Array(),//用于存储当前 items的 id数组 
	
	initComponent : function(){//覆盖父类的组件初始化方法
	
		/**
		 * 覆盖父类的配置项
		 */
		Ext.apply(this, {
			title : '我的第一个面板',
			width : 1000,//面板宽度
			height : 500,//面板高度
			layout : 'hbox',//指定布局管理器
			buttonAlign : 'center',//指定按钮排列方式，还可以是 left,right
			autoScroll : true,
			tbar : [{
				xtype : 'label',
				text : '输入面板id'
			}, {
				id : 'panelId',
				xtype : 'textfield',
				allowBlank : false
			}, {//顶部工具条
				text : '增加面板',
				handler : function(btn){
					var panelId = Ext.getCmp('panelId').getValue();
					this.addPanelToContainer(panelId);
				},
				scope : this
			}, {
				text : '删除面板',
				handler : function(){
					var panelId = Ext.getCmp('panelId').getValue();
					var flag = false;
					for(var i=0 ; i<this.itemsIdArr.length; i++){
						if(panelId==this.itemsIdArr[i]){
							flag = true;
							break;
						}
					}
					if(flag){
						this.removePanelFromContainer();
						//将panel id从数组中移除	
						//.............
						
						
					} else {
						Ext.Msg.alert('提示', '面板不存在！');
					}
				},
				scope : this
			}, {
				text : '删除所有面板',
				handler : function(){
					this.removeAll();
					this.doLayout();
				},
				scope : this
			}],
			buttons : [new Ext.Button({//配置按钮组
				text : '确定',
				handler : function(btn){
				
				}
			}), {
				text : '关闭',
				handler : function(){
					this.close();
				},
				scope : this
			}]
		});
		
		Learn.window.WindowExtendPro.superclass.initComponent.call(this);//调用父类的构造方法
		
	},
	
	addPanelToContainer : function(id){
		var panel = new Ext.Panel({
			id : id,
			title : '新增面板' + id,
			width : 200,
			height : 400,
			frame : true,
			border : true
		});
		this.add(panel);
		this.itemsIdArr.push(id);
		this.doLayout();
	},
	
	removePanelFromContainer : function(id){
		this.remove(id, true);
		this.doLayout();
	}

});
